<template>
    <view class="cart">
        <view class="cart-item" v-for="i in getlistnum" :key="i.id" @click.stop="Godetail(i.id)">
            <view class="cart-top">
                <view>{{ i.title }}</view>
            </view>
            <view class="cart-bottom">
                <view class="cart-left">
                    <image
                        :src="BaseUrl + i.cover"
                        style="width: 170rpx; height: 170rpx; border-radius: 30rpx"
                        mode="scaleToFill"
                    />
                </view>
                <view class="cart-right">
                    <view class="cart-right-text">
                        {{ i.title }}
                    </view>
                    <view class="cart-right-bon">
                        <view class="cart-right-left" style="width: 180rpx; display: flex; line-height: 60rpx">
                            <image
                                :src="BaseUrl + '/static/catering/Eyeo.png'"
                                style="width: 26rpx; height: 26rpx"
                                mode="scaleToFill"
                            />
                            <text class="cart-right-left-text">{{ i.views }}</text>
                        </view>
                        <view class="cart-right-right" @click.stop="dian(i.id)">
                            <view v-if="i.isLike == 0" class="cart-right-ss">
                                <image
                                    :src="BaseUrl + '/static/catering/noollection.png'"
                                    style="width: 30rpx; height: 30rpx"
                                    mode="scaleToFill"
                                />
                                <view class="cart-right-s-texts">未收藏</view>
                            </view>
                            <view v-else class="cart-right-s">
                                <image
                                    :src="BaseUrl + '/static/catering/shouc.png'"
                                    style="width: 30rpx; height: 30rpx"
                                    mode="scaleToFill"
                                />
                                <view class="cart-right-s-text">已收藏</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { BaseUrl } from "../../../utils/req.js";
export default {
    name: "Recommend",
    props: {
        message: {
            type: Number,
        },
    },
    data() {
        return {
            getlistnum: [],
            BaseUrl,
        };
    },
    watch: {
        message: {
            handler() {
                this.getArticle();
            },
        },
    },
    mounted() {
        this.getArticle();
    },
    methods: {
        // 跳转种草详情
        Godetail(id) {
            uni.navigateTo({
                url: "/dabai/pages/zcDetails/zcDetails?id=" + id,
            });
        },
        // 列表
        async getArticle() {
            let id = this.message;
            await this.$request
                .get("api/wanlshop.find.find/getList", {
                    wanlshop_find_cate_id: id,
                })
                .then((res) => {
                    this.getlistnum = res.data.data;
                });
        },
        // 收藏
        async dian(id) {
            await this.$request
                .post("api/wanlshop/find/user/setFindUser", {
                    id: id,
                    type: "likes",
                })
                .then((res) => {
                    if (res.data.data == 1) {
                        uni.showToast({
                            title: "收藏成功",
                            icon: "none",
                            duration: 2000,
                        });
                        this.getArticle();
                    } else {
                        uni.showToast({
                            title: "取消收藏",
                            icon: "none",
                            duration: 2000,
                        });
                        this.getArticle();
                    }
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.cart {
    width: 94vw;
    margin: 0 3vw;

    .cart-item {
        width: 100%;
        height: 290rpx;
        background-color: #fff;
        border-radius: 30rpx;
        margin-bottom: 20rpx;

        .cart-top {
            width: 94vw;
            margin: 0 3vw;
            padding: 32rpx 34rpx 32rpx 0;
        }

        .cart-bottom {
            display: flex;

            .cart-left {
                margin: 0 20rpx;
            }

            .cart-right {
                flex: 1;

                .cart-right-text {
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #666666;
                    line-height: 42rpx;
                    height: 84rpx;
                    overflow: hidden;
                    padding: 0 10rpx;
                }

                .cart-right-bon {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 20rpx;

                    .cart-right-left {
                        .cart-right-left-text {
                            margin-left: 10rpx;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            font-size: 26rpx;
                            color: #666666;
                        }
                    }

                    .cart-right-right {
                        display: flex;
                        align-items: center;

                        .cart-right-s {
                            display: flex;
                            align-items: center;
                            margin-right: 20rpx;
                            border-radius: 30rpx;
                            border: 1rpx solid #057849;
                            padding: 6rpx 15rpx;

                            .cart-right-s-text {
                                margin-left: 10rpx;
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                font-size: 26rpx;
                                color: #057748;
                            }
                        }

                        .cart-right-ss {
                            display: flex;
                            align-items: center;
                            margin-right: 20rpx;
                            border-radius: 30rpx;
                            border: 1rpx solid #666;
                            padding: 6rpx 15rpx;

                            .cart-right-s-texts {
                                margin-left: 10rpx;
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                font-size: 26rpx;
                                color: #666666;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
